<!DOCTYPE html>
<title>Test of animation-direction</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    #target {
      animation-direction: alternate;
      animation-duration: 2s;
      animation-iteration-count: 2;
      animation-name: move;
      animation-play-state: paused;
      animation-timing-function: linear;
      animation-fill-mode: both;


      background-color: red;
      height: 100px;
      left: 500px;
      position: absolute;
      width: 100px;
    }
    @keyframes move {
      from { left: 0px; }
      to   { left: 400px; }
    }

</style>
<div id="target"></div>
<script>
  'use strict';
  test(function() {
    target.style.animationDelay = '1s';
    assert_equals(getComputedStyle(target).left, '0px');

    target.style.animationDelay = '-0.5s';
    assert_equals(getComputedStyle(target).left, '100px');

    target.style.animationDelay = '-1.5s';
    assert_equals(getComputedStyle(target).left, '300px');

    target.style.animationDelay = '-2.5s';
    assert_equals(getComputedStyle(target).left, '300px');

    target.style.animationDelay = '-3.5s';
    assert_equals(getComputedStyle(target).left, '100px');

    target.style.animationDelay = '-5s';
    assert_equals(getComputedStyle(target).left, '0px');
  }, "animation-direction alternate plays forwards, then backwards");
</script>
